<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '40px',
    }"
  >
    <div class="wrap-other-roll">
      <!-- 用户总览 -->
      <div class="card">
        <div class="title">用户总览</div>
        <user-item />
      </div>
      <!-- 访问量统计 -->
      <div class="card">
        <div class="title">访问量统计</div>
        <visit-item />
      </div>
      <!-- 订单统计 -->
      <div class="card">
        <div class="title">订单统计</div>
        <order-item />
      </div>
      <!-- 近七天系统订单 -->
      <div class="card">
        <div class="title">近七天系统订单</div>
        <list-item :data="countOrder7" />
      </div>
      <!-- 近七天退款订单 -->
      <div class="card">
        <div class="title">近七天退款订单</div>
        <list-item :data="cancelCountOrder" />
      </div>
      <!-- 近七天退款金额 -->
      <div class="card">
        <div class="title">近七天退款金额</div>
        <list-item :data="cancelOrderMoney" />
      </div>
      <!-- 订单统计 -->
      <div class="card">
        <div class="title">订单统计</div>
        <order-chart />
      </div>
    </div>
  </div>
</template>
<script>
import userItem from './components/user'
import visitItem from './components/visit'
import orderItem from './components/order'
import listItem from './components/list'
import orderChart from './components/order-chart'
export default {
  components: {
    userItem,
    visitItem,
    orderItem,
    listItem,
    orderChart,
  },
  data() {
    return {
      countOrder7: [],
      cancelCountOrder: [],
      cancelOrderMoney: [],
    }
  },
  created() {
    this.order7List()
    this.cancelCountOrderList()
    this.cancelOrderMoneyList()
  },
  methods: {
    order7List() {
      //近七天系统订单
      this.$axios.get('/count/bigscreent1/countOrder7').then((data) => {
        this.countOrder7 = []
        if (data.code == 200) {
          this.countOrder7 = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    cancelCountOrderList() {
      //近七天退款订单
      this.$axios.get('/count/bigscreent1/cancelCountOrder').then((data) => {
        this.cancelCountOrder = []
        if (data.code == 200) {
          this.cancelCountOrder = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    cancelOrderMoneyList() {
      //近七天退款金额
      this.$axios.get('/count/bigscreent1/cancelOrderMoney').then((data) => {
        this.cancelOrderMoney = []
        if (data.code == 200) {
          this.cancelOrderMoney = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 10px;
}
.title {
  color: #45ab49;
  border-bottom: 1px solid #45ab49;
  padding: 10px 0;
  margin-bottom: 15px;
}
</style>
